<template>
    <div class="user">
        <div class="tab">
            <i @click="$router.push('/mine')"><van-icon name="arrow-left"/></i>
            <span>我的片库</span>
        </div>
        <van-tabs type="card">
            <van-tab title="观看历史">
                <van-pull-refresh
                    v-model="isLoading"
                    success-text="刷新成功"
                    @refresh="onRefresh"
                >
                    <van-grid :gutter="0" :border="false" :column-num="3">
                        <van-grid-item v-for="item in result" :key="item.videoId"  @click="$router.push(`/episode/${item.videoId}`)">
                            <van-image fit="cover" :src="item.imgURL" />
                            <div class="types">
                                <div>{{ item.title }}</div>
                                <div>更新至{{item.all}}</div>
                                已看{{item.history}}
                                </div>
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>
            </van-tab>
            <van-tab title="我的收藏">
                <van-pull-refresh
                    v-model="isLoading"
                    success-text="刷新成功"
                    @refresh="onRefresh"
                >
                    <van-grid :gutter="0" :border="false" :column-num="3">
                        <van-grid-item v-for="item in result" :key="item.videoId"  @click="$router.push(`/episode/${item.videoId}`)">
                            <van-image fit="cover" :src="item.imgURL" />
                            <div class="types">
                                <div>{{ item.title }}</div>
                                <div>更新至{{item.all}}</div>
                                已看{{item.history}}
                                </div>
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh></van-tab
            >
            <van-tab title="预约片单">
                <van-pull-refresh
                    v-model="isLoading"
                    success-text="刷新成功"
                    @refresh="onRefresh"
                >
                    <van-grid :gutter="0" :border="false" :column-num="3">
                        <van-grid-item v-for="item in result" :key="item.videoId"  @click="$router.push(`/episode/${item.videoId}`)">
                            <van-image fit="cover" :src="item.imgURL" />
                            <div class="types">
                                <div>{{ item.title }}</div>
                                <div>更新至{{item.all}}</div>
                                已看{{item.history}}
                                </div>
                        </van-grid-item>
                    </van-grid>
                </van-pull-refresh>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import { getAllHistory } from '../../api/jiang/vip';
export default {
    data() {
        return {
            isLoading: false,
            result: [] // 影视数组
        };
    },
    created() {
        this.getAllHistory();
    },
    methods: {
        onRefresh() {
            setTimeout(() => {
                this.isLoading = false;
            }, 1000);
        },
        async getAllHistory() {
            try {
                const { data } = await getAllHistory();
                this.result = data.data;
            } catch (error) {}
        }
    }
};
</script>

<style lang="scss" scoped>
.tab {
    position: relative;
    height: 88px;
    font-size: 35px;
    line-height: 88px;
}
.tab i {
    left: 10px;
    top: 7px;
    font-size: 60px;
    color: #101010;
    position: absolute;
}
/deep/.van-tabs--card > .van-tabs__wrap {
    height: 80px;
}
/deep/.van-tabs__nav--card {
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
}
/deep/.van-tabs__nav--card .van-tab.van-tab--active {
    color: #ff9800;
    font-size: 32px;
    background-color: #fff;
}
/deep/.van-tabs__nav--card .van-tab {
    color: #101010;
    border: 0;
}
/deep/.van-tab__text--ellipsis {
    overflow: visible;
}
/deep/.van-grid {
    box-sizing: border-box;
    padding: 20px 0 0 0;
}
/deep/.van-image {
    height: 324px;
    position: relative;
}
/deep/ .van-grid-item__content--center{
    background-color: #EEEEEE ;
}
.types {
    position: absolute;
    bottom: 1px;
    width: 235px;
    height: 80px;
    font-size: 22px;
    background-color: rgba(187, 187, 187, 100);
    color: rgba(255, 255, 255, 100);
    opacity: 0.95;
}
</style>
